<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue1</title>
        <style>
            .nj-active{
                background: skyblue;
            }
        </style>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
    </head>
    <body>
        <div id="app">
            <router-link to="/one?name=xm&age=18" tag="button">切换到第一个界面</router-link>
            <router-link to="/two/zs/16" tag="button">切换到第二个界面</router-link>
            <router-view></router-view>
        </div>
        <template id="one">
            <div>
                <p>我是第一页面</p>
            </div>
        </template>
        <template id="two">
            <div>
                <p>我是第二个界面</p>
            </div>
        </template>
        <script>
            const one = {
                template:"#one",
                created() {
                    console.log(this.$route.query);
                },
            }
            const two = {
                template: "#two",
                created() {
                    console.log(this.$route.params.age);
                    console.log(this.$route.params.name);
                },
            }

            const routes = [
                // { path: '/', redirect: '/one' },
                {path : '/one', component: one},
                {path: '/two/:name/:age', component: two}
            ]
            const router = new VueRouter({
                routes: routes,
                linkActiveClass: "nj-active"
            })

            let vue = new Vue({
        // 告诉vue的实例对象，将来需要控制界面上的那个区域
                el:'#app',
                data:{
                    name:"内容1"
                },
                router: router,
                comments:{
                    "one":one,
                    "two":two
                }
            });
        </script>
    </body>
</html>